{% load static %}
<link rel="stylesheet" href="{% static 'css/blog/page.css' %}">
<div class="page-wrapper">
    {% if is_paginated %}
        <div class="pagination">
            <ul>
                {% if is_paginated %}
                    {% if page_obj.has_previous %}
                        <a class="page-able" href="?page={{ page_obj.previous_page_number }}">
                            <li>上一页</li>
                        </a>
                    {% else %}
                        <a class="page-disable">
                            <li>上一页</li>
                        </a>
                    {% endif %}
                    <!--如果页列表不包含第一页那么则始终显示第一页-->
                    {% if first %}
                        <a class="page-able" href="?page=1">
                            <li>1</li>
                        </a>
                    {% endif %}
                    {% if left %}
                        {% if left_has_more %}
                            <li>...</li>
                        {% endif %}
                        {% for i in left %}
                            <a class="page-able" href="?page={{ i }}">
                                <li>{{ i }}</li>
                            </a>
                        {% endfor %}
                    {% endif %}
                    <!--当前页-->
                    <a class="page-able" href="?page={{ page_obj.number }}">
                        <li style="background: #555555; color: #ffffff">{{ page_obj.number }}</li>
                    </a>

                    <!--当前页左侧连续页号码-->
                    {% if right %}
                        {% for r in right %}
                            <a class="page-able" href="?page={{ r }}">
                                <li>{{ r }}</li>
                            </a>
                        {% endfor %}
                        {% if right_has_more %}
                            <li>...</li>
                        {% endif %}
                    {% endif %}

                    <!--是否显示最后一页-->
                    {% if last %}
                        <a class="page-able" href="?page={{ paginator.num_pages }}">
                            <li>{{ paginator.num_pages }}</li>
                        </a>
                    {% endif %}

                    <!-- 如果当前页还有下一页，显示一个下一页的按钮 -->
                    {% if page_obj.has_next %}
                        <a class="page-able" href="?page={{ page_obj.next_page_number }}">
                            <li>下一页</li>
                        </a>
                    {% else %}
                        <a class="page-disable">
                            <li>下一页</li>
                        </a>
                    {% endif %}
                {% endif %}

            </ul>
        </div>
    {% endif %}
</div>